<template>
    <div class="doctor-adm">
        <div class="doctor-adm-top">
            <div class="adm-top-title">
                <h3>{{ docAdm }}</h3>
            </div>
            <div class="adm-top-fun" v-show="!increase">
                <el-button type="primary" plain @click="delCheckedModule">删除</el-button>
                <el-button type="primary" @click="increaseDoc">新增科室信息</el-button>
            </div>
        </div>
        <div class="doctor-adm-from" v-show="!increase">
            <el-form ref="form" class="adm-from">
                <div :class="isactive ? 'active select' : 'select'" @click="selModule()">
                    <span>{{ selText1 }}</span>
                    <i :class="selShow ? 'el-icon-arrow-right' : 'el-icon-arrow-down'"></i>
                    <ul class="sel-module" v-show="!selShow">
                        <li :class="item.isClick ? 'sel-module-li active' : 'sel-module-li'" v-for="item in modules"
                            :key="item.id" @click.stop="optLi(item.isClick, item.id)">
                            <span>{{ item.module }}</span>
                            <i class="el-icon-arrow-right"></i>
                            <ul class="sel-ul" v-show="item.isClick">
                                <li class="sel-ul-li" v-if="item.id === 1" v-for="index in item.selData" :key="index.id"
                                    @click="selMod1(item.module, index.module)">
                                    {{ index.module }}</li>
                                <li class="sel-ul-li" v-if="item.id === 2" v-for="items in item.selData" :key="items.id"
                                    @click="selMod1(item.module, items.module)">
                                    {{ items.module }}</li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <el-form-item style="width:320px;margin: 0 10px;">
                    <el-input v-model="moduleInp" @blur="searchModule" ref="module" placeholder="请输入科室名称"></el-input>
                </el-form-item>
                <el-button type="primary" style="width: 80px;height: 40px;" @click="searchModule">搜索</el-button>
            </el-form>
            <el-table ref="multipleTable" :data="doctorList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                tooltip-effect="dark" style="width: 100%" class="adm-table"
                @selection-change="(selection) => { changeCheck(selection) }">
                <el-table-column type="selection" width="50" align="center">
                </el-table-column>
                <el-table-column label="科室名称" prop="regName" align="center">
                </el-table-column>
                <el-table-column label="所属院区" prop="inpatientArea" align="center">
                    <template slot-scope="scope">
                        <span>{{ areaDic[scope.row.inpatientArea - 1] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="科室" prop="regDep" align="center">
                    <template slot-scope="scope">
                        <span>{{ officesAreaDic[scope.row.regDep - 1] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="科室位置" prop="location" align="center">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total" class="page-cur"
                @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </el-pagination>
        </div>
        <div class="doctor-adm-from" v-show="increase">
            <div class="doctor-adm-title">编辑医生信息</div>
            <div class="edit-doctor">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="科室名称" prop="name">
                        <el-input v-model="ruleForm.name" placeholder="请输入科室名称" style="width: 320px;"></el-input>
                    </el-form-item>
                    <el-form-item label="所属院区" prop="area">
                        <el-select v-model="ruleForm.area" placeholder="请选择院区" style="width: 320px;">
                            <el-option label="东院区" :value="1"></el-option>
                            <el-option label="北院区" :value="2"></el-option>
                            <el-option label="湘南院区" :value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="上级科室" prop="offices">
                        <el-select v-model="ruleForm.offices" placeholder="请选择上级科室" style="width: 320px;">
                            <el-option label="内科" :value="1"></el-option>
                            <el-option label="外科" :value="2"></el-option>
                            <el-option label="妇科" :value="3"></el-option>
                            <el-option label="男科" :value="4"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="科室位置" prop="officesArea">
                        <el-input v-model="ruleForm.officesArea" placeholder="请输入科室位置" style="width: 320px;"></el-input>
                    </el-form-item>
                    <el-form-item label="科室状态" prop="delivery">
                        <el-switch v-model="ruleForm.delivery"></el-switch>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="preserve('ruleForm')">保存</el-button>
                        <el-button @click="cancel">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import { getModuleList, delModule, updataModule, addModule } from "@/api/hospital/moduleAdm";
import { nanoid } from "nanoid";
export default {
    name: 'ModuleAdm',
    data() {
        return {
            // 搜索框数据
            moduleInp: '',
            // 判断是编辑用户还是添加用户
            isupdata: false,
            // 分页器默认显示第一页
            currentPage: 1,
            // 分页器默认每页10条
            pageSize: 10,
            // 分页器总数据
            total: 0,
            // 选择科室数据
            modules: [
                {
                    id: 1, module: '内科', selData: [
                        { id: 11, module: '消化内科', isClick: false },
                        { id: 12, module: '血液内科', isClick: false },
                        { id: 13, module: '风湿免疫内科', isClick: false },
                        { id: 14, module: '肾内科', isClick: false }
                    ], isClick: false
                },
                {
                    id: 2, module: '外科', selData: [
                        { id: 21, module: '消化外科', isClick: false },
                        { id: 22, module: '血液外科', isClick: false },
                        { id: 23, module: '风湿免疫外科', isClick: false },
                        { id: 24, module: '肾外科', isClick: false }
                    ], isClick: false
                }
            ],
            // 选择科室下拉选择框的标题
            selText1: '请选择科室',
            // 选择科室下拉是否出现
            selShow: true,
            // 编辑医生信息弹窗是否出现
            increase: false,
            isactive: false,
            // 医生管理标题
            docAdm: '科室管理',
            ruleForm: {
                name: '',
                area: '',
                offices: '',
                officesArea: '',
                delivery: false,
            },
            // 字典
            areaDic: ['东院区', '北院区', '湘南院区'],
            officesAreaDic: ['外科', '内科', '妇科', '男科'],
            doctorList: [],
            // 选中的科室数据
            doctorCheckedList: [],
            rules: {
                name: [
                    { required: true, message: '请输入科室名称', trigger: 'blur' }
                ],
                area: [
                    { required: true, message: '请选择院区', trigger: 'change' }
                ],
                offices: [
                    { required: true, message: '请选择科室', trigger: 'change' }
                ],
                officesArea: [
                    { required: true, message: '请输入科室位置', trigger: 'change' }
                ],
            },
            dialogImageUrl: '',
            dialogVisible: false,
        }
    },
    methods: {
        // 搜索功能
        async searchModule() {
            let _val = this.$refs.module.value
            if (_val.trim() != '') {
                let _arr = await getModuleList()
                let _list = []
                _arr.data.forEach(item => {
                    if (item.regName.indexOf(_val) >= 0) {
                        _list.push(item)
                    }
                })
                this.doctorList = _list
                this.currentPage = 1
                this.pageSize = 10
                this.total = this.doctorList.length
                
            } else {
                this.getModule()
            }
            // console.log(this.moduleInp);
            // this.moduleInp = ''
        },
        // 选中的数据
        changeCheck(selection) {
            // console.log(selection);
            this.doctorCheckedList = selection
        },
        // 删除所选科室数据
        delCheckedModule() {
            if (confirm('确定要删除所选数据吗？')) {
                this.doctorCheckedList.forEach(async item => {
                    await delModule(item.id)
                })
            }

            setTimeout(() => {
                this.getModule()
            }, 10)
            this.$message({
                message: '删除成功',
                type: 'success'
            })
        },
        // 获取最新科室数据
        async getModule() {
            let _res = await getModuleList()
            this.doctorList = _res.data
            this.total = this.doctorList.length
        },
        // 选择科室
        selModule() {
            this.selShow = !this.selShow
            this.isactive = !this.isactive
        },
        // 选择科室的内科外科
        optLi(isClick, id) {
            this.isactive = !this.isactive
            this.modules.filter(item => {
                if (item.id === id) {
                    item.isClick = !isClick
                } else {
                    item.isClick = false
                }
            })
        },
        // 选择内科外科的内容
        selMod1(h, val) {
            this.selShow = true
            this.selText1 = h + ' - ' + val
        },
        // 新增医生按钮
        increaseDoc() {
            this.isupdata = false
            this.ruleForm = {
                id: '',
                name: '',
                area: '',
                offices: '',
                officesArea: '',
                delivery: false,
            }
            this.increase = true
            this.docAdm = '新增科室信息'
        },
        // 新增医生保存按钮
        preserve(formName) {
            // 判断是修改数据还是添加数据
            if (this.isupdata) {
                let _id = this.$refs[formName].$options.propsData.model.id
                this.$refs[formName].validate(async valid => {
                    if (valid) {
                        this.increase = false
                        this.docAdm = '科室管理'
                        let arr = {
                            id: _id,
                            regName: this.ruleForm.name,
                            inpatientArea: this.ruleForm.area,
                            regDep: this.ruleForm.offices,
                            location: this.ruleForm.officesArea,
                            delivery: this.ruleForm.delivery,
                            isdelete: 0
                        }
                        await updataModule(_id, arr)
                        this.getModule()
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        })
                    } else {
                        return false
                    }
                })
            } else {
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        this.increase = false
                        this.docAdm = '科室管理'
                        let arr = {
                            id: nanoid(),
                            regName: this.ruleForm.name,
                            inpatientArea: this.ruleForm.area,
                            regDep: this.ruleForm.offices,
                            location: this.ruleForm.officesArea,
                            delivery: this.ruleForm.delivery,
                            isdelete: 0
                        }
                        await addModule(arr)
                        this.getModule()
                        this.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                    } else {
                        return false;
                    }
                });
            }
        },
        // 新增医生取消按钮
        cancel() {
            this.increase = false
            this.docAdm = '科室管理'
        },
        // table编辑按钮
        handleEdit(index, row) {
            this.isupdata = true
            this.increase = true
            this.ruleForm.id = row.id
            this.ruleForm.name = row.regName
            this.ruleForm.area = row.inpatientArea
            this.ruleForm.offices = row.regDep
            this.ruleForm.officesArea = row.location
        },
        // 删除按钮
        async handleDelete(index, row) {
            if (confirm('确定要删除吗？')) {
                await delModule(row.id)
                this.getModule()
            }
        },
        // 分页器
        // 每页多少条数据
        handleSizeChange(val) {
            this.pageSize = val
        },
        // 最新页数
        handleCurrentChange(val) {
            this.currentPage = val
        }
    },
    mounted() {
        this.getModule()
    }
}
</script>
<style scoped lang="scss">
.doctor-adm-top {
    display: flex;
    justify-content: space-between;
    height: 70px;

    .adm-top-title {
        h3 {
            font-size: 28px;
            margin-left: 50px;
            font-weight: 400;
            position: relative;
        }

        h3::before {
            content: '';
            display: block;
            width: 30px;
            height: 10px;
            background-color: rgba(0, 110, 255, 1);
            position: absolute;
            border-radius: 5px;
            top: 15px;
            left: -50px;
        }
    }
}

// from  table
.doctor-adm-from {
    widows: 100%;
    box-sizing: border-box;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 8px;
    box-shadow: 0px 0px 20px rgb(215, 215, 215);

    .doctor-adm-title {
        background-color: rgba(242, 242, 242, 1);
        position: relative;
        height: 50px;
        border-radius: 8px 8px 0 0;
        font-size: 16px;
        color: #006EFF;
        line-height: 50px;
        padding-left: 15px;
    }

    .edit-doctor {
        padding: 20px 0;
    }

    .adm-from {
        display: flex;

        .select.active {
            border: 1px solid #b3d8ff;
        }

        // 下拉选择
        .select {
            width: 160px;
            height: 40px;
            border: 1px solid #DCDFE6;
            box-sizing: border-box;
            border-radius: 4px;
            // text-align: center;
            display: flex;
            justify-content: space-around;
            line-height: 40px;
            font-size: 14px;
            position: relative;

            .el-icon-arrow-right,
            .el-icon-arrow-down {
                line-height: 40px;
            }

            .sel-module {
                position: absolute;
                z-index: 999;
                top: 45px;
                left: -1px;
                width: 160px;
                height: 160px;
                background-color: #fff;
                border-radius: 4px;
                box-sizing: border-box;
                border: 1px solid #b3d8ff;

                .sel-module-li {
                    display: flex;
                    padding: 0 17px;
                    justify-content: space-between;

                    .sel-ul {
                        width: 160px;
                        height: 160px;
                        position: absolute;
                        z-index: 999;
                        top: 0;
                        left: 165px;
                        background-color: #fff;
                        border: 1px solid #b3d8ff;
                        border-radius: 4px;

                        .sel-ul-li {
                            padding-left: 20px;
                            color: #333;
                        }

                        .sel-ul-li:hover {
                            color: #409EFF;
                            background-color: #b3d8ff;
                        }
                    }
                }

                .active {
                    background-color: #409EFF;
                    color: #fff;
                }

                .sel-module-li:hover {
                    background-color: #b3d8ff;
                }
            }
        }
    }

    .adm-table,
    .page-cur,
    .adm-from {
        padding: 20px;
    }

    .adm-table {
        .green0 {
            display: inline-block;
            padding: 5px;
            background-color: rgba(46, 212, 119, 0.0980392156862745);
            border-radius: 20px;
            color: #2ED477;
        }

        .green1 {
            display: inline-block;
            padding: 5px;
            background-color: rgba(255, 145, 56, 0.0980392156862745);
            border-radius: 20px;
            margin: 0 5px;
            color: #FF9138;
        }

        .green2 {
            display: inline-block;
            padding: 5px;
            background-color: rgba(244, 99, 99, 0.0980392156862745);
            border-radius: 20px;
            color: rgba(244, 99, 99, 0.988235294117647);
        }
    }

    .select.active {
        border: 1px solid #b3d8ff;
    }

    .select {
        width: 320px;
        height: 40px;
        border: 1px solid #DCDFE6;
        box-sizing: border-box;
        border-radius: 4px;
        // text-align: center;
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
        line-height: 40px;
        font-size: 14px;
        position: relative;

        .el-icon-arrow-up,
        .el-icon-arrow-down,
        .el-icon-arrow-right {
            line-height: 40px;
            transform: translateX(5px)
        }

        .sel-module {
            position: absolute;
            z-index: 999;
            top: 45px;
            left: -1px;
            width: 160px;
            height: 160px;
            background-color: #fff;
            border-radius: 4px;
            box-sizing: border-box;
            border: 1px solid #b3d8ff;

            .sel-module-li {
                display: flex;
                padding: 0 17px;
                justify-content: space-between;

                .sel-ul {
                    width: 160px;
                    height: 160px;
                    position: absolute;
                    z-index: 999;
                    top: 0;
                    left: 165px;
                    background-color: #fff;
                    border: 1px solid #b3d8ff;
                    border-radius: 4px;

                    .sel-ul-li {
                        padding-left: 20px;
                        color: #333;
                    }

                    .sel-ul-li:hover {
                        color: #409EFF;
                        background-color: #b3d8ff;
                    }
                }
            }

            .active {
                background-color: #409EFF;
                color: #fff;
            }

            .sel-module-li:hover {
                background-color: #b3d8ff;
            }
        }
    }

    .doctor-tag.active {
        border: 1px solid #b3d8ff;
    }

    .doctor-tag {
        width: 320px;
        height: 40px;
        border: 1px solid #DCDFE6;
        box-sizing: border-box;
        border-radius: 4px;
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
        line-height: 40px;
        font-size: 14px;
        position: relative;

        .el-icon-arrow-up,
        .el-icon-arrow-down {
            line-height: 40px;
            transform: translateX(5px)
        }

        .doctor-tag-ul {
            width: 320px;
            background-color: #fff;
            border-radius: 4px;
            box-sizing: border-box;
            border: 1px solid #b3d8ff;
            position: absolute;
            top: 45px;
            left: 0;
            z-index: 999;

            .doctor-tag-li {
                height: 40px;
                padding-left: 20px;
            }

            .doctor-tag-li:hover {
                background-color: #b3d8ff;
            }

            .doctor-tag-sel {
                width: 100%;
                height: 40px;
                text-align: right;
                padding: 0 20px;
                box-sizing: border-box;
                font-size: 16px;

                .sel-cancel {
                    color: #333;
                    margin-right: 15px;
                }

                .sel-define {
                    color: #409EFF;
                }
            }
        }
    }
}
</style>